<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
let map = null;
const path = ref([]);
const current_position = ref([]);
onMounted(() => {
    window._AMapSecurityConfig = {
        securityJsCode: "dfae3ea3e850587594392c0be5308843",
    };
    AMapLoader.load({
        key: "5e93b2782ec4f6d9333488e2bb1b6109",
        version: "2.0",
        plugins: ["AMap.Scale"],
    })
        .then((AMap) => {
            map = new AMap.Map("map", {
                viewMode: "3D",
                zoom: 7,
                center: [116.132761, 24.326663],
            });
            AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye",
                "AMap.Geolocation", "AMap.MapType", "AMap.MouseTool",
                'AMap.AutoComplete',
                'AMap.PlaceSearch'
            ], function () {
                //异步同时加载多个插件
                // 添加地图插件
                map.addControl(new AMap.ToolBar()); // 工具条控件;范围选择控件
                map.addControl(new AMap.Scale()); // 显示当前地图中心的比例尺
                map.addControl(new AMap.HawkEye()); // 显示缩略图
                map.addControl(new AMap.Geolocation()); // 定位当前位置
                map.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换
                const StartIcon = new AMap.Icon({
                    size: new AMap.Size(25, 34), //图标尺寸
                    image: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png", //Icon 的图像
                    imageOffset: new AMap.Pixel(-9, -3), //图像相对展示区域的偏移量，适于雪碧图等
                    imageSize: new AMap.Size(135, 40), //根据所设置的大小拉伸或压缩图片
                });
                const EndIcon = new AMap.Icon({
                    size: new AMap.Size(40, 34), //图标尺寸
                    image: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png", //Icon 的图像
                    imageOffset: new AMap.Pixel(-95, -3), //图像相对展示区域的偏移量，适于雪碧图等
                    imageSize: new AMap.Size(135, 40), //根据所设置的大小拉伸或压缩图片
                });

                //www.helloimg.com/i/2024/12/19/6763d657970a9.png
                const startPoint = new AMap.Marker({
                    icon: StartIcon,
                    position: [121.471541, 31.259207000000007],
                    // 通过设置 offset 来添加偏移量
                    offset: new AMap.Pixel(-9, -30),
                })
                const endPoint = new AMap.Marker({
                    position: [116.132761, 24.326663],
                    icon: EndIcon,
                    offset: new AMap.Pixel(-15, -30),
                    // 通过设置 offset 来添加偏移量
                });
                const carPoint = new AMap.Marker({
                    content: '<img style="width: 30px; height: 30px;" src="https://www.helloimg.com/i/2024/12/19/6763d657970a9.png" />',
                    position: [118.675676, 24.874132],
                    // 通过设置 offset 来添加偏移量
                    offset: new AMap.Pixel(-30, -30),
                })
                startPoint.setMap(map);
                endPoint.setMap(map);
                carPoint.setMap(map);

                const polyline = new AMap.Polyline({
                    path: [
                        [121.471541, 31.259207000000007],
                        [120.153576, 30.287459],
                        [121.549792, 29.868388],
                        [120.672051, 27.994267],
                        [118.675676, 24.874132],
                        [116.132761, 24.326663],
                    ],
                    outlineColor: "#ffeeee",
                    borderWeight: 3,
                    strokeColor: "#3366FF",
                    strokeOpacity: 1,
                    // 折线样式还支持 'dashed'
                    strokeStyle: "solid",
                    // strokeStyle是dashed时有效
                    strokeDasharray: [10, 5],
                    lineJoin: "round",
                    lineCap: "round",
                    zIndex: 50,
                });
                polyline.setMap(map);
                const linePast = new AMap.Polyline({
                    path: [
                        [121.471541, 31.259207000000007],
                        [120.153576, 30.287459],
                        [121.549792, 29.868388],
                        [120.672051, 27.994267],
                        [118.675676, 24.874132],
                    ],
                    isOutline: false,
                    borderWeight: 3,
                    strokeColor: "orange",
                    strokeOpacity: 1,
                    // 折线样式还支持 'dashed'
                    strokeStyle: "solid",
                    // strokeStyle是dashed时有效
                    lineJoin: "round",
                    zIndex: 50,
                })
                linePast.setMap(map);
                // 以下是鼠标工具插件
                // const mouseTool = new AMap.MouseTool(map);
                // mouseTool.marker(); // 关闭鼠标工具
                // mouseTool.rule();// 用户手动绘制折线图,测量距离
                // mouseTool.measureArea(); // 测量面积
            });
            // 单击
            // map.on('click', (e) => {
            //     // lng ==> 经度值  lat => 维度值
            //     current_position.value = [e.lnglat.lng, e.lnglat.lat];
            //     // path.value.push([e.lnglat.lng, e.lnglat.lat]);
            //     addMarker();
            //     // addPolyLine();
            // })
            // function addMarker() {
            //     const marker = new AMap.Marker({
            //         icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            //         position: current_position.value, // 这里我们通过上面的点击获取经纬度坐标,实时添加标记
            //         // 通过设置 offset 来添加偏移量
            //         offset: new AMap.Pixel(-26, -54),
            //     });
            //     marker.setMap(map);
            // }
        })
        .catch((e) => {
            console.log(e);
        });
});


onUnmounted(() => {
    map?.destroy();
});
</script>
<template>
    <div id="map"></div>
</template>

<style scoped>
#map {
    width: 100%;
    height: 100%;
}
</style>
